<template>
  <view class="detail-container">
    <!-- 疫苗封面 -->
    <view class="cover">
      <image :src="vaccine.image" mode="aspectFill" class="bg-image" />
      <view class="overlay"></view>
      <view class="info">
        <text class="name">{{ $t(vaccine.nameKey) }}</text>
        <view class="tags">
          <text v-if="vaccine.price === 0" class="tag free">{{ $t('vaccine.tag.free') }}</text>
          <text v-if="vaccine.recommended" class="tag recommended">{{ $t('vaccine.tag.recommended') }}</text>
          <text v-if="vaccine.seasonal" class="tag seasonal">{{ $t('vaccine.tag.seasonal') }}</text>
        </view>
      </view>
    </view>
    
    <!-- 疫苗说明 -->
    <view class="info-card">
      <view class="section">
        <text class="section-title">{{ $t('vaccine.detail.description') }}</text>
        <text class="content">{{ $t(vaccine.fullDescKey) }}</text>
      </view>
      <view class="section">
        <text class="section-title">{{ $t('vaccine.detail.suitable') }}</text>
        <text class="content">{{ $t(vaccine.suitableKey) }}</text>
      </view>
      <view class="section">
        <text class="section-title">{{ $t('vaccine.detail.notice') }}</text>
        <text class="content">{{ $t(vaccine.noticeKey) }}</text>
      </view>
    </view>
    
    <!-- 接种点列表 -->
    <view class="clinic-card">
      <view class="card-title">可预约接种点</view>
      <view class="clinic-list">
        <view 
          class="clinic-item"
          v-for="(clinic, index) in clinics"
          :key="index"
          @tap="selectClinic(clinic)"
        >
          <image :src="clinic.image" mode="aspectFill" class="image" />
          <view class="info">
            <text class="name">{{ clinic.name }}</text>
            <text class="address">{{ clinic.address }}</text>
            <view class="tags">
              <text v-for="(tag, idx) in clinic.tags" :key="idx">{{ tag }}</text>
            </view>
          </view>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 底部预约按钮 -->
    <view class="bottom-bar">
      <view class="price-info">
        <text class="label">{{ $t('vaccine.detail.price') }}</text>
        <text class="price" v-if="vaccine.price > 0">MOP {{ vaccine.price }}</text>
        <text class="free" v-else>{{ $t('vaccine.free') }}</text>
      </view>
      <button class="book-btn primary-btn" @tap="bookVaccine">
        {{ $t('vaccine.book') }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 疫苗详情数据
const vaccine = ref({
  id: 1,
  nameKey: 'vaccine.list.covid.name',
  fullDescKey: 'vaccine.list.covid.fullDesc',
  suitableKey: 'vaccine.list.covid.suitable',
  noticeKey: 'vaccine.list.covid.notice',
  image: '/static/vaccine/covid.jpg',
  price: 0,
  recommended: true
})

// 接种点列表
const clinics = ref([
  {
    id: 1,
    name: '澳门镜湖医院预防接种门诊',
    address: '澳门连胜马路33号',
    image: '/static/hospital/kiang-wu.jpg',
    tags: ['全天候接种', '可预约', '免费停车']
  },
  {
    id: 2,
    name: '澳门科大医院疫苗中心',
    address: '澳门氹仔大学大马路',
    image: '/static/hospital/must.jpg',
    tags: ['专业团队', '环境舒适', '交通便利']
  }
])

// 选择接种点
const selectClinic = (clinic) => {
  uni.navigateTo({
    url: `/pages/vaccine/book?id=${vaccine.value.id}&clinicId=${clinic.id}`
  })
}

// 预约接种
const bookVaccine = () => {
  uni.navigateTo({
    url: `/pages/vaccine/book?id=${vaccine.value.id}`
  })
}

onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  const vaccineId = page.$page?.options?.id
  
  // 加载疫苗详情
  loadVaccineDetail(vaccineId)
})

const loadVaccineDetail = (id) => {
  // 这里应该调用API获取数据
  console.log('加载疫苗详情:', id)
}
</script>

<style lang="scss">
.detail-container {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 120rpx;
  
  .cover {
    position: relative;
    height: 400rpx;
    
    .bg-image {
      width: 100%;
      height: 100%;
    }
    
    .overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 60%;
      background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
    }
    
    .info {
      position: absolute;
      left: 30rpx;
      right: 30rpx;
      bottom: 30rpx;
      z-index: 1;
      
      .name {
        font-size: 40rpx;
        color: #fff;
        font-weight: bold;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .tags {
        display: flex;
        gap: 16rpx;
        
        .tag {
          font-size: 24rpx;
          padding: 6rpx 16rpx;
          border-radius: $radius-sm;
          backdrop-filter: blur(10px);
          
          &.free {
            color: #fff;
            background: rgba($success, 0.3);
          }
          
          &.recommended {
            color: #fff;
            background: rgba($primary-color, 0.3);
          }
          
          &.seasonal {
            color: #fff;
            background: rgba($warning, 0.3);
          }
        }
      }
    }
  }
  
  .info-card {
    margin: 20rpx;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    box-shadow: $shadow-sm;
    
    .section {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .section-title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 16rpx;
        display: block;
      }
      
      .content {
        font-size: 28rpx;
        color: $text-regular;
        line-height: 1.8;
      }
    }
  }
  
  .clinic-card {
    margin: 20rpx;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    box-shadow: $shadow-sm;
    
    .card-title {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    
    .clinic-list {
      .clinic-item {
        display: flex;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #eee;
        
        &:last-child {
          border-bottom: none;
        }
        
        .image {
          width: 120rpx;
          height: 120rpx;
          border-radius: $radius-md;
          margin-right: 20rpx;
        }
        
        .info {
          flex: 1;
          
          .name {
            font-size: 30rpx;
            color: $text-primary;
            font-weight: bold;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .address {
            font-size: 26rpx;
            color: $text-regular;
            margin-bottom: 12rpx;
            display: block;
          }
          
          .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 12rpx;
            
            text {
              font-size: 22rpx;
              color: $primary-color;
              background: $primary-light;
              padding: 4rpx 12rpx;
              border-radius: $radius-sm;
            }
          }
        }
        
        .icon-arrow-right {
          font-size: 24rpx;
          color: $text-secondary;
          margin-left: 20rpx;
        }
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20rpx 30rpx;
    background: #fff;
    box-shadow: $shadow-lg;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .price-info {
      .label {
        font-size: 26rpx;
        color: $text-regular;
        margin-right: 12rpx;
      }
      
      .price {
        font-size: 36rpx;
        color: $danger;
        font-weight: bold;
      }
      
      .free {
        font-size: 36rpx;
        color: $success;
        font-weight: bold;
      }
    }
    
    .book-btn {
      width: 240rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 30rpx;
      
      &:active {
        transform: scale(0.98);
      }
    }
  }
}
</style> 